<template>
  <div>
    <Card>
      <Tables ref="tables" searchable search-place="top" :loading="listLoading" :columns="columns" v-model="list">
        <template slot="handleButton">
          <Button v-if="oauthClientDetailsManager_btn_add" type="primary" @click="handleAdd"><Icon type="md-add" />新增</Button>
        </template>
        <template slot="searchButton">
          <div style="float:right">
            <Input placeholder="租户名称" class="search-input" v-model="listQuery.name">
            <Button @click="getList" slot="append" type="info" icon="ios-search"></Button>
            </Input>
          </div>
        </template>
        <template slot="action" slot-scope="props">
          <Button v-if="oauthClientDetailsManager_btn_edit" type="warning" size="small">删除</Button>
          <Button v-if="oauthClientDetailsManager_btn_del" type="warning" size="small">删除</Button>
        </template>
      </Tables>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: left;">
          <Page v-show="!listLoading" :total="total" :page-size-opts="[50,100,500,1000,2000]" :current="listQuery.page" show-total show-sizer :page-size="listQuery.limit" @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"></Page>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import {
  page,
  addObj,
  getObj,
  delObj,
  putObj
} from '@/api/auth/oauthClientDetails/index'
import { mapGetters } from 'vuex'
import Tables from '_c/tables'
export default {
  name: 'oauthClientDetails',
  components: {
    Tables
  },
  data () {
    return {
      form: {
        clientId: undefined,
        clientSecret: undefined,
        scope: 'read',
        webServerRedirectUri: undefined,
        accessTokenValidity: undefined,
        refreshTokenValidity: undefined,
        additionalInformation: '{}',
        autoapprove: undefined
      },
      columns: [
        { title: 'client', key: 'clientId' },
        { title: '秘钥', key: 'clientSecret' },
        { title: '说明', key: 'description' },
        { title: '作用域', key: 'scope' },
        { title: '重定向地址', key: 'webServerRedirectUri' },
        { title: 'token失效时长', key: 'accessTokenValidity' },
        { title: 'token刷新时长', key: 'refreshTokenValidity' },
        { title: '自动授权', key: 'autoapprove' }
      ],
      rules: {
        clientId: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        clientSecret: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        scope: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        authorizedGrantTypes: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            message: '长度 > 3  个字符',
            trigger: 'blur'
          }
        ],
        webServerRedirectUri: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            message: '长度 > 3  个字符',
            trigger: 'blur'
          }
        ],
        accessTokenValidity: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        refreshTokenValidity: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ]
      },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      oauthClientDetailsManager_btn_edit: false,
      oauthClientDetailsManager_btn_del: false,
      oauthClientDetailsManager_btn_add: false,
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableKey: 0
    }
  },
  created () {
    this.getList()
    this.oauthClientDetailsManager_btn_edit = this.elements['oauthClientDetailsManager:btn_edit']
    this.oauthClientDetailsManager_btn_del = this.elements['oauthClientDetailsManager:btn_del']
    this.oauthClientDetailsManager_btn_add = this.elements['oauthClientDetailsManager:btn_add']
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList () {
      this.listLoading = true
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
    },
    handleFilter () {
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handleAdd () {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate (row) {
      getObj(row.clientId)
        .then(response => {
          this.form = response.data
          this.dialogFormVisible = true
          this.dialogStatus = 'update'
        })
    },
    handleDelete (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delObj(row.clientId)
            .then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              const index = this.list.indexOf(row)
              this.list.splice(index, 1)
            })
        })
    },
    create (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form)
            .then(() => {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
        } else {
          return false
        }
      })
    },
    cancel (formName) {
      this.dialogFormVisible = false
      const set = this.$refs
      set[formName].resetFields()
    },
    update (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          this.form.password = undefined
          putObj(this.form.clientId, this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    resetTemp () {
      this.form = {
      }
    }
  }
}
</script>
